<template>
  <div class="content">
    <div class="search">
      <div class="time">
        <p class="hinttime">操作时间</p>
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="time">
        <p class="hinttime">模块</p>
        <el-select v-model="modeltext" filterable placeholder="请选择">
          <el-option
            v-for="(item,index) in modellist"
            :key="index"
            :label="item.model"
            :value="item.model"
          ></el-option>
        </el-select>
      </div>
      <div class="time">
        <p class="hinttime">操作人员</p>
        <el-select v-model="user" filterable placeholder="请选择">
          <el-option v-for="item in userlist" :key="item.id" :label="item.accont" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="time">
        <p class="hinttime">部门</p>
        <el-cascader v-model="value_bm" :options="Door_list" :props="props" @change="handleChange"></el-cascader>
      </div>
      <div class="time">
        <p class style="margin-left:30px;"></p>
        <el-button type="primary" @click="seachlist" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="lists">
      <el-table :data="tableData"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column align="center" prop="get_name.name" label="姓名"></el-table-column>
        <el-table-column prop="model" align="center" label="模块"></el-table-column>
        <el-table-column align="center" prop="content" label="操作内容" w></el-table-column>
        <el-table-column align="center" prop="created_at" label="操作时间"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page.sync="page"
          :page-size="10"
          @current-change="Changepage"
          layout="total, prev, pager, next"
          :total="alltotal"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getDoorList,
  getUserList,
  getmodellist,
  getSytemList,
  SETDATE
} from "../../api/System.js";
export default {
  data() {
    return {
      //部门id
      value_bm: "",
      //模块
      modeltext: "",
      //操作人员
      user: "",
      //操作时间
      time: [],
      page: 1,
      alltotal: 0,
      value1: "",
      person: "",
      kind: "",
      props: {
        children: "children",
        label: "name",
        value: "id",
        checkStrictly: true
      },
      currentPage1: 1,
      tableData: [],
      value: [],
      //部门列表
      Door_list: [],
      //操作人员列表
      userlist: [],
      //模块列表
      modellist: []
    };
  },
  created() {
    this.doorlist();
    this.getuser();
    this.getmodel();
    this.getlist();
  },
  methods: {
    //获取模块
    getmodel() {
      getmodellist().then(res => {
        if (res.code == 200) {
          console.log(res);
          this.modellist = res.data;
        }
      });
    },
    //获取用户列表
    getuser() {
      getUserList({ per: 9999999999 }).then(res => {
        if (res.code == 200) {
          this.userlist = res.data.data;
        }
      });
    },
    //点击搜索
    seachlist() {
      this.page = 1;
      this.alltotal = 0;
      this.getlist();
    },
    //页数改变
    Changepage(e) {
      this.page = e;
      this.getlist();
    },
    getlist() {
      var data = {};
      if (this.time.length > 0) {
        data.start_time = new Date(this.time[0]) / 1000;
        data.end_time = new Date(this.time[1]) / 1000;
      }
      data.model = this.modeltext;
      if (this.value_bm.length > 0) {
        var index = this.value_bm.length - 1;
        data.door_id = this.value_bm[index];
      }
      data.name_id = this.user;
      data.page = this.page;
      data.per = 10;
      getSytemList(data).then(res => {
        if (res.code == 200) {
          console.log("xx");
          console.log(res);
          this.page = res.data.current_page;
          this.alltotal = res.data.total;
          this.tableData = res.data.data;
          this.tableData.forEach(element => {
            element.created_at = SETDATE(element.created_at);
          });
        }
      });
    },
    //获取部门列表
    doorlist() {
      getDoorList().then(res => {
        console.log(res);
        if (res.code == 200) {
          this.Door_list = res.data;
        }
      });
    },
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>
<style lang="scss">
.time {
  display: flex;
  align-items: center;
}
.hinttime {
  margin-right: 20px;
  margin-left: 30px;
  font-weight: 500;
  width: 90px;
}
.lists {
  width: 97%;
  margin: 0 auto;
  margin-top: 10px;
}
.block {
  float: right;
}
</style>